<template>
	<!-- <view class="modifieddata">
		modifieddata
	</view> -->
	<view class="modifieddata">
		
		<view class="modifieddata_top">
			<view class="modifieddata_top_a">

				<view class="text4" @tap="uploading5">
					<view class="text5">
						<image :src="tupian5"></image>
					</view>
					<view class="text6"> 上传头像</view>
				</view>
			</view>

			<view class="modifieddata_bottom">
				<view class="modifieddata_bottom_box">
					<view class="modifieddata_bottom_box_a_a">
						<form class="form">
							<view class="form_top">
								<view class="form_top_sj">
									<text class="text1">技师昵称</text>
									<text class="text2"></text>
								</view>
								<input class="ipt" v-model="nickName" />
							</view>
							<view class="form_top">
								<view class="form_top_sj">
									<text class="text1">技师姓名</text>
									<text class="text2"></text>
								</view>
								<input class="ipt" v-model="realName" />
							</view>
							<view class="form_top">
								<view class="form_top_sj">
									<text class="text1">技师性别</text>
									<text class="text2"></text>
								</view>
								<picker class="picker" @change="bindPickerChange" :value="index" :range="array">
									<view class="uni-input">{{array[index]}}</view>
								</picker>
							</view>
							<view class="form_top">
								<view class="form_top_sj">
									<text class="text1">技师工龄</text>
									<text class="text2"></text>
								</view>
								<input class="ipt" v-model="workingYears" />
							</view>
							<view class="form_top">
								<view class="form_top_sj">
									<text class="text1">技师年龄</text>
									<text class="text2"></text>
								</view>
								<input class="ipt" v-model="age" />
							</view>
						</form>
					</view>
					<view class="modifieddata_bottom_box_a">
						<text class="text1">技师类型</text>

						<text class="text2"></text>
					</view>
					<view class="modifieddata_leixing">
						<radio-group style="display: flex;flex-wrap: wrap;">
							<view class="modifieddata_xia" v-for="(item,index) in list" :key="item.id">
								<radio class="checkbox" :value="item.value" @click="radioChange(item.value)"
									:checked="item.value === masseuseType" color="#00DF25"  style="transform:scale(0.6)"></radio>
								<text class="text">{{item.label}}</text>
							</view>
						</radio-group>

					</view>
					<view class="modifieddata_bottom_box_a_s">
						<text class="text1">服务项目</text>
						<text class="text2"></text>

					</view>
					<view class="modifieddata_bottom_box_tuina">
						<!-- <view class="box"> -->
						<text class="text" @click="projectclick(item.id)" :class="{'active':selected.indexOf(item.id)!=-1}"
							v-for="(item,index) in list1" :key="item.id">{{item.serviceName}}</text>
						<!-- </view> -->


					</view>
					<view class="modifieddata_bottom_box_a_a">
						<form class="form">
							<view class="form_top">
								<view class="form_top_sj">
									<text class="text1">手机号</text>
									<text class="text2"></text>
								</view>
								<input class="ipt" v-model="phone" :disabled="true" />
							</view>
							<view class="form_top">
								<view class="form_top_sj">
									<text class="text1">所在城市</text>
									<text class="text2"></text>
								</view>
								<view class="ipt" @click="inputsite">{{mergerName}}</view>
							</view>
							<view class="form_top">
								<view class="form_top_sj">
									<text class="text1">详细地址</text>
									<text class="text2"></text>
								</view>
								<input class="ipt" placeholder="街道/办事处/楼栋/单元/楼层/房间号" v-model="address" />
							</view>
						</form>
					</view>
					<view class="modifieddata_bottom_box_a_js jishi">
						<text class="text1">形象照</text>
						<text class="text2"></text>

					</view>
					<view class="shangchuang">
						<!-- <view></view> -->
						<image class="image images imgs" :src="tupian6"></image>
						<view class="shangchuang_left">
							<image class="img" src="../../static/imgs/tupian.png" @tap="uploading6"></image>
							<text class="text">上传图片</text>
						</view>
					</view>
					<view class="modifieddata_bottom_box_a_js">
						<text class="text1">技师风采</text>
						<text class="text2"></text>

					</view>
					<view class="shangchuang1 sss" >
						<!-- <view class="xingxiang">
							<image class="img" src="../../static/imgs/xx.png"></image>
							<text class="text">形象照</text>
						</view> -->
						<view class="booox" v-for="(item,index) in styleUrllist" :key='index'>
							<u-icon class="icon" size="18px" @click="delImg(index)" name="close-circle" />
							<image class="image ss" :src="item" @click="preview(item,index)"></image>
						</view>
						<view class="booox"></view>
						<view class="shangchuang_left">
							<image class="img" src="../../static/imgs/tupian.png" @tap="uploading"></image>
							<text class="text">上传图片</text>
						</view>
					</view>
					<view class="modifieddata_bottom_box_a_js jishi">
						<text class="text1">技师资质</text>
						<text class="text2"></text>

					</view>
					<view class="shangchuang">
						<!-- <view></view> -->
						<image class="image images" :src="tupian1"></image>
						<view class="shangchuang_left">
							<image class="img" src="../../static/imgs/tupian.png" @tap="uploading1"></image>
							<text class="text">上传图片</text>
						</view>
					</view>
					<view class="modifieddata_bottom_box_a_js jishi">
						<text class="text1">商家信息</text>
						<text class="text2"></text>

					</view>
					<view class="shangchuang">
						<!-- <view></view> -->
						<image class="image images imgs" :src="tupian2"></image>
						<view class="shangchuang_left">
							<image class="img" src="../../static/imgs/tupian.png" @tap="uploading2"></image>
							<text class="text">上传图片</text>
						</view>
					</view>
					<view class="modifieddata_bottom_box_a_js jishi">
						<text class="text1">身份证正面</text>
						<text class="text2"></text>

					</view>
					<view class="shenfengzheng">
						<view class="shenfengzheng_left">
							<image class="img" :src="tupian3"></image>

						</view>
						<view class="shangchuang_left">
							<image class="img" src="../../static/imgs/tupian.png" @tap="uploading3"></image>
							<text class="text">上传图片</text>
						</view>
						<!-- <view class="shenfengzheng_left">
							<image class="img" :src="idcardNational"></image>




						</view> -->
					</view>
					<view class="modifieddata_bottom_box_a_js jishi">
						<text class="text1">身份证反面</text>
						<text class="text2"></text>

					</view>
					<view class="shenfengzheng">
						<view class="shenfengzheng_left">
							<image class="img" :src="tupian4"></image>

						</view>
						<view class="shangchuang_left">
							<image class="img" src="../../static/imgs/tupian.png" @tap="uploading4"></image>
							<text class="text">上传图片</text>
						</view>
						<!-- <view class="shenfengzheng_left">
							<image class="img" :src="idcardNational"></image>
					
					
					
					
						</view> -->
					</view>
					<view class="modifieddata_bottom_box_a_js jishi">
						<text class="text1">个人介绍</text>
						<text class="text2"></text>

					</view>
					<view class="wenben">
						<u--textarea v-model="message" :maxlength="100" :count="true" confirmType='done'/>
					</view>
				</view>
			</view>
			<view class="xiugai" @click="preserve">
				保存修改
			</view>
			<u-popup :show="show" position="bottom" custom-style="height: 40%;" @close="onClose">

				<view class="box" style="display: flex;justify-content: space-between;padding: 20rpx 50rpx;">
					<text @click="cancel">取消</text>
					<text @click="ascertain">确定</text>
				</view>
				<picker-view indicator-style="height:88rpx;" style="height:440rpx" :value="value" @change="bindChange"
					class="citybody">
					<picker-view-column style="line-height: 88rpx;font-size: 28rpx;text-align: center;">
						<view v-for="(item,index) in provinces" :key='index'>{{item}}</view>
					</picker-view-column>
					<picker-view-column style="line-height: 88rpx;font-size: 28rpx;text-align: center;">
						<view v-for="(item,index) in citys" :key='index'>{{item}}</view>
					</picker-view-column>
					<picker-view-column style="line-height: 88rpx;font-size: 28rpx;text-align: center;">
						<view v-for="(item,index) in areas" :key='index'>{{item}}</view>
					</picker-view-column>
				</picker-view>

			</u-popup>

		</view>

	</view>
</template>

<script>
	import homeServices from '../../service/homeService'
	export default {
		data() {
			return {
				checked: false,
				array: ['男', '女', ],
				index: 0,
				current: '',
				message: '',
				list: [

				],
				list1: [],
				id: '',
				obj: {
					changeValue: '',
					Values: ''
				},
				valuetype: '',
				selected: [],
				imgArr: [],
				imgArrs: [],
				imgArrss: [],
				imgArrsss: [],
				imgArrssss: [],
				tupian: '',
				tupian1: '',
				tupian2: '',
				tupian3: '',
				tupian4: '',
				tupian5: '',
				tupian6: '',
				modid: '',
				avatar: '',
				styleUrllist: [],
				zizhiobj: '',
				licenseUrl: '',
				phone: '',
				idcardImgurl: [],
				workingYears: '',
				realName: '',
				nickName: '',
				address: '',
				mergerName: '',
				age: '',
				show: false,
				provinces: [], //省所有
				citys: [], //市所有
				areas: [], //区所有
				province: "", //当前省份
				city: "", //当前市
				area: "", //当前区
				value: [0, 0, 0],
				values: [0, 0, 0],
				lists: [],
				name1: '',
				name2: '',
				name3: '',
				ids: '',
				ids1: '',
				ids2: '',
				iddd: '',
				newlist: [],
				masseuseType:'',//技师类型

			}
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			async getxinxi() {
				let params = {}
				let res = await homeServices.getlist()
				console.log(res, 'fffffffffff')
				if(res.data.styleUrl==null){
					
				}else{
					this.styleUrllist = res.data.styleUrl.split(',')
				}
				
				this.tupian1 = res.data.certificateUrl
				this.tupian2 = res.data.licenseUrl
				this.message = res.data.introduction
				this.tupian5 = res.data.avatar
				this.tupian3 = res.data.idcardImgurl
				this.tupian4 = res.data.idcardNational
				this.phone = res.data.phone
				console.log(this.phone, 'qqqqqqq')
				this.workingYears = res.data.workingYears
				this.realName = res.data.realName
				this.nickName = res.data.nickName
				this.index = res.data.gender
				this.address = res.data.address
				this.age = res.data.age
				this.tupian6 = res.data.showPhoto
				this.iddd = res.data.id
				this.ids1 = res.data.provinceId
				this.ids2 = res.data.cityId
				this.ids = res.data.areaId
				this.mergerName = res.data.mergerName
				this.tupian = res.data.styleUrl
				this.masseuseType = res.data.masseuseType //技师类型
				res.data.serviceItems.map((item)=>{
					this.selected.push(item.id) //服务项目
				})
				console.log(this.selected);

			},
			// 类型
			async gettype() {
				let res = await homeServices.gettype()
				this.list = res.data
			},
			async getserve() {

				let params = {}
				let res = await homeServices.getserve(params)
				// console.log(res)
				this.list1 = res.data
			},

			replaceInput(event) {

				this.changeValue = event.target.value
				// console.log(this.changeValue)
			},
			// 点击类型
			radioChange(value) {
				console.log(value);
				this.masseuseType = value
			},
			async projectclick(id) {
				if (this.selected.indexOf(id) !== -1) {
					this.selected.splice(this.selected.indexOf(id), 1); //取消
					console.log(this.selected);
				} else {
					this.selected.push(id); //选中添加到数组里
					console.log(this.selected);
					
				}

			},

			formSubmit(e) {
				console.log(e)
			},
			uploading() {
				let that = this
				let uploadFile = ''
				uni.chooseImage({
					count: 1,
					sourceType: ['album','camera'],
					success(res) {
						that.imgArr = res.tempFilePaths[0];
						console.log(that.imgArr, 'ddddddddddd')
						uni.uploadFile({
							// 需要上传的地址
							url: 'http://h5.anerle168.com/masseuseapi/imgUpload',
							// filePath  需要上传的文件
							filePath: res.tempFilePaths[0],
							name: 'file',


							success: ress => {
								let res1 = JSON.parse(ress.data);
								let data1 = res1.data[0];
								that.styleUrllist.push(data1)
								that.tupian = that.styleUrllist.join(",");
								console.log(that.tupian, 'ccccccccccc')
								// uni.getStorageSync('items')
							}

						});

					}
				});



			},
			uploading1() {
				let that = this
				let uploadFile = ''
				uni.chooseImage({
					count: 1,
					sourceType: ['album','camera'],
					success(res) {
						that.imgArr = res.tempFilePaths[0];
						console.log(that.imgArr, 'ddddddddddd')
						uni.uploadFile({
							// 需要上传的地址
							url: 'http://h5.anerle168.com/masseuseapi/imgUpload',
							// filePath  需要上传的文件
							filePath: res.tempFilePaths[0],
							name: 'file',


							success: ress => {
								console.log(ress, 'd2222222222222')
								let res1 = JSON.parse(ress.data);
								let data1 = res1.data[0];
								that.tupian1 = data1
								console.log(that.tupian1, 'eeeeeeeeeeeeee')
								// uni.getStorageSync('items')
							}

						});

					}
				});



			},
			uploading2() {
				let that = this
				let uploadFile = ''
				uni.chooseImage({
					count: 1,
					sourceType: ['album','camera'],
					success(res) {
						that.imgArr = res.tempFilePaths[0];
						console.log(that.imgArr, 'ddddddddddd')
						uni.uploadFile({
							// 需要上传的地址
							url: 'http://h5.anerle168.com/masseuseapi/imgUpload',
							// filePath  需要上传的文件
							filePath: res.tempFilePaths[0],
							name: 'file',


							success: ress => {
								console.log(ress, 'd2222222222222')
								let res1 = JSON.parse(ress.data);
								let data1 = res1.data[0];
								that.tupian2 = data1
								// console.log(that.tupian)
								// uni.getStorageSync('items')
							}

						});

					}
				});



			},
			uploading3() {
				let that = this
				let uploadFile = ''
				uni.chooseImage({
					count: 1,
					sourceType: ['album','camera'],
					success(res) {
						that.imgArr = res.tempFilePaths[0];
						console.log(that.imgArr, 'ddddddddddd')
						uni.uploadFile({
							// 需要上传的地址
							url: 'http://h5.anerle168.com/masseuseapi/imgUpload',
							// filePath  需要上传的文件
							filePath: res.tempFilePaths[0],
							name: 'file',


							success: ress => {
								console.log(ress, 'd2222222222222')
								let res1 = JSON.parse(ress.data);
								let data1 = res1.data[0];
								that.tupian3 = data1
								// console.log(that.tupian)
								// uni.getStorageSync('items')
							}

						});

					}
				});



			},
			uploading4() {
				let that = this
				let uploadFile = ''
				uni.chooseImage({
					count: 1,
					sourceType: ['album','camera'],
					success(res) {
						that.imgArr = res.tempFilePaths[0];
						console.log(that.imgArr, 'ddddddddddd')
						uni.uploadFile({
							// 需要上传的地址
							url: 'http://h5.anerle168.com/masseuseapi/imgUpload',
							// filePath  需要上传的文件
							filePath: res.tempFilePaths[0],
							name: 'file',


							success: ress => {
								console.log(ress, 'd2222222222222')
								let res1 = JSON.parse(ress.data);
								let data1 = res1.data[0];
								that.tupian4 = data1
								// console.log(that.tupian)
								// uni.getStorageSync('items')
							}

						});

					}
				});



			},
			uploading5() {
				let that = this
				let uploadFile = ''
				uni.chooseImage({
					count: 1,
					sourceType: ['album','camera'],
					success(res) {
						that.imgArr = res.tempFilePaths[0];
						console.log(that.imgArr, 'ddddddddddd')
						uni.uploadFile({
							// 需要上传的地址
							url: 'http://h5.anerle168.com/masseuseapi/imgUpload',
							// filePath  需要上传的文件
							filePath: res.tempFilePaths[0],
							name: 'file',


							success: ress => {
								console.log(ress, 'd2222222222222')
								let res1 = JSON.parse(ress.data);
								let data1 = res1.data[0];
								that.tupian5 = data1
								// console.log(that.tupian)
								// uni.getStorageSync('items')
							}

						});

					}
				});



			},
			uploading6() {
				let that = this
				let uploadFile = ''
				uni.chooseImage({
					count: 1,
					sourceType: ['album','camera'],
					success(res) {
						that.imgArr = res.tempFilePaths[0];
						console.log(that.imgArr, 'ddddddddddd')
						uni.uploadFile({
							// 需要上传的地址
							url: 'http://h5.anerle168.com/masseuseapi/imgUpload',
							// filePath  需要上传的文件
							filePath: res.tempFilePaths[0],
							name: 'file',


							success: ress => {
								console.log(ress, 'd2222222222222')
								let res1 = JSON.parse(ress.data);
								let data1 = res1.data[0];
								that.tupian6 = data1
								// console.log(that.tupian)
								// uni.getStorageSync('items')
							}

						});

					}
				});



			},
			async inputsite() {
				this.show = true
				this.provinces = []
				this.citys = []
				this.areas = []
				let params = {}
				let res = await homeServices.inputsite(params)
				this.newlist = res.data
				// console.log(this.newlist, 'rrrrrrrrrrrrrr')
				this.newlist.forEach(item => {
					this.provinces.push(item.n) //第一列省份所有名称
					// console.log(this.provinces)
				})
				console.log(this.newlist[0].c);
				this.newlist[0].c.forEach(item => {
					this.citys.push(item.n) //第一个省的市所有名称
				})
				this.newlist[0].c[0].c.forEach(item => {
					this.areas.push(item.n) //第一个省份的第一个市的所有区
				})
				console.log(this.citys);
				this.province = this.newlist[0].n //省
				this.city = this.newlist[0].c[0].n //市
				this.area = this.newlist[0].c[0].c[0].n //区
				this.mergerName=this.province + '' + this.city + '' + this.area;
				
			},
			bindChange(e) {
				console.log(e)
				// const val = e.detail.value
				var val = e.detail.value //当前选中的下标
				// console.log(val)
				var t = this.values; //旧选中下标
				this.lists = []
				this.newlist.forEach((it, i) => {
					if (i == val[0]) {
						this.lists.push(it.n)
						this.name1 = it.n
						this.ids1 = it.v
						console.log(this.ids1, '111111')
						it.c.forEach((t, is) => {
							if (is == val[1]) {
								this.lists.push(t.n)
								this.name2 = t.n
								this.ids2 = t.v
								console.log(this.ids2, '2222222222')
								t.c.forEach((tt, ii) => {
									if (ii == val[2]) {
										this.lists.push(tt.n)
										this.name3 = tt.n
										this.ids = tt.v
										console.log(this.ids, '33333333')
									}
								})
							}

						})
					}


				})
				// console.log(this.lists)
				if (val[0] != t[0]) { //如果选择的省份变了
					this.citys = [] //清空市区
					this.areas = []
					this.newlist[val[0]].c.forEach(item => { //获取新选择省份的所有市
						this.citys.push(item.n)
					})
					this.newlist[val[0]].c[0].c.forEach(item => { //获取新选择省份的第一个市的所有区
						this.areas.push(item.n)
					})
					this.province = this.provinces[val[0]], //省
						this.city = this.newlist[val[0]].c[0].n, //市
						this.area = this.newlist[val[0]].c[0].c[0].n, //区
						this.values = val,
						this.value = [val[0], 0, 0]
					return;
				}
				if (val[1] != t[1]) { //如果选择的市变了
					this.areas = []; //清空区
					this.newlist[val[0]].c[val[1]].c.forEach(item => {
						this.areas.push(item.n)
					})
					this.city = this.citys[val[1]] //市
					this.area = this.newlist[val[0]].c[val[1]].c[0].n //区
					this.values = val,
						this.value = [val[0], val[1], 0]
					return;
				}
				if (val[2] != t[2]) {
					this.area = this.areas[val[2]] //区
					this.values = val
					return;
				}




			},
			ascertain() {
				this.mergerName = this.name1 + '' + this.name2 + '' + this.name3;
				this.show = false
				
			},
			async preserve() {
				let params = {
					nickName: this.nickName,
					realName: this.realName,
					gender: this.index,
					workingYears: this.workingYears,
					masseuseType: this.masseuseType,
					mergerName: this.mergerName,
					address: this.address,
					styleUrl: this.tupian,
					certificateUrl: this.tupian1,
					licenseUrl: this.tupian2,
					idcardImgurl: this.tupian3,
					idcardNational: this.tupian4,
					avatar: this.tupian5,
					introduction: this.message,
					age: this.age,
					showPhoto: this.tupian6,
					id: this.iddd,
					provinceId: this.ids1,
					cityId: this.ids2,
					areaId: this.ids,
					phone: this.phone,
					serviceRelations: this.selected

				}
				let res = await homeServices.preserve(params)
				let arr = res.msg
				if (res.status == 200) {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 3000,
					})
					setTimeout( function () { 
						uni.navigateBack({
						
						})
					 }, 1500);
					
					
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 3000,
					})
				}
			},
			onClose() {
				this.show = false
			},

			confirms() {
				this.show = false
			},
			cancel() {
				this.show = false
			},
			preview(img) {
				console.log('预览')
				// 新建一个存放预览图片的空数组
				var imgArr = []
				imgArr.push(img)
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},




			delImg(index) {


				this.styleUrllist.splice(index, 1)
				this.tupian = this.styleUrllist.join(',')


			},


		},
		onShow() {
			// this.getxinxi()
			// this.gettype()
			// this.getserve()
			// this.getrelevance()

		},
		onLoad(options) {
			this.getxinxi()
			this.gettype()
			this.getserve()
			console.log(options.id)
			this.modid = options.id
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/sass/modifieddata.scss'
</style>
